<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>标签列表</title>
		<!-- Bootstrap -->
		<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.min.css">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/Validform_v5.3.2/css/style.css" />
		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<!-- header -->
		<header></header>
		<div class="main">
			<div class="left-side"></div>
			<div class="right-content">
				<!-- 表格 -->
				<div class="panel panel-primary">
					<div class="panel-heading">标签列表</div>
					<div class="panel-body">
						<!-- Table -->
						<table class="table">
							<thead>
								<tr>
									<th>#</th>
									<th>标签名称</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
					</div>
				</div>

			</div>
		</div>

		<!-- 编辑Modal模态框 -->
		<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<form class="form-horizontal" action="/tag/edit" method="post">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">编辑标签</h4>
						</div>
						<div class="modal-body">
							<!-- 表单 -->

							<div class="form-group">
								<input type="hidden" name="id">
								<label for="" class="col-sm-2 control-label">
									标签名称
									<span class="text-danger">*</span>
								</label>
								<div class="col-sm-10">
									<input type="text" name="name" class="form-control" placeholder="请输入标签名称" datatype="*" errormsg="分类名称至少一位">
								</div>
							</div>

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="submit" id="updateBtn" class="btn btn-primary">保存修改</button>
						</div>
					</form>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		<!-- 删除Modal模态框 -->
		<div class="modal fade" id="deleteModal" tabindex="-2" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">确认</h4>
					</div>
					<div class="modal-body">
						<div class="alert alert-warning" role="alert">
							<span class="glyphicon glyphicon-exclamation-sign"></span> 确定要删除这一标签吗？
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" id="confirmBtn" class="btn btn-primary">确定</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="lib/jQuery/jquery-1.12.4.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="lib/bootstrap/js/bootstrap.min.js"></script>
		<script src="lib/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/Validform_v5.3.2/Validform_v5.3.2_min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/load.js"></script>
		<script type="text/javascript">
			loadList()

			function loadList() {
				$.getJSON('/tag/list', function(res) {
					if (res.status) {
						var html = '';
						res.data.forEach(function(item, index) {
							html +=
								`<tr>
										<td>${item.id}</td>
										<td>${item.name}</td>
										<td>
											<button type="button" data-id="${item.id}" class="btn btn-default edit btn-xs">
												<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 编辑
											</button>
											<button data-id="${item.id}" type="button" class="btn btn-default btn-xs remove">
												<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除
											</button>
										</td>
									</tr>`

						});
						$('.table tbody').html(html);
					}
				})
			}

			$('.table tbody').on('click', '.remove', function() {
				var id = $(this).data("id");
				console.log(id);
				var tr = $(this).parents("tr");
				layer.confirm("确认要删除此标签吗？", function(index, layero) {
					//ajax
					$.post("/tag/delete", {
						id: id
					}, function(res) {
						if (res.status) {
							layer.msg("删除成功！");
							// tr.remove();
							// location.href = "article-list.html";
						} else {
							layer.msg(res.msg);
						}
					})

					layer.close(index);
				}, function() {
					layer.msg("取消成功！");
				});
			})
		</script>
		
		<script type="text/javascript">
			$("#editModal form").Validform({
				tiptype: 4,
				ajaxPost: true,
				callback: function(res) {
					if (res.status) {
						$('#editModal').modal('hide');
						layer.msg(res.msg);
						loadList();
					} else {
						layer.msg(res.msg);
					}
				}
			})
		</script>
		<script type="text/javascript">
			$('.table tbody').on('click', '.edit', function() {
				//提取数据
				var name = $(this).parent().siblings("td").eq(1).text();
				// var pId = $(this).parent().siblings("td").eq(2).text();
				var id = $(this).data("id");
				//赋值表单
				$('input[name=name]').val(name);
				// $("#parent").val(pId);
				$("input[name=id]").val(id);
				$('#editModal').modal();
			})
		</script>
	</body>

</html>
